.popular-science {
  .banner {
    transform: translateX(-100%);
    animation: fade-transform 0.5s ease-in-out forwards;

    @keyframes fade-transform {
      100% {
        transform: translateX(0);
      }
    }
    img {
      display: block;
      width: 100%;
    }
  }

  // 动画
  .fade-enter {
    opacity: 0;
    transform: scale(0.9);
  }
  .fade-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 5000ms, transform 5000ms;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 5000ms, transform 5000ms;
  }
  .title {
    height: 90px;
    padding: 10px 0;
    text-align: center;
    background-color: #eee;
    .title-top {
      color: #dc8eaa;
    }
    .title-bottom {
      color: #999;
    }
  }
  .science-cloth {
    .cloth-content {
      width: 1088px;
      display: flex;
      margin: 40px auto;
      .left,
      .right {
        width: 70px;
        img {
          display: block;
          width: 70px;
        }
      }
      .left {
        margin-right: 24px;
        img {
          margin: 148px 0px 0 0;
        }
      }
      .right {
        margin-left: 24px;
        img {
          margin: 148px 0 0 0px;
        }
      }
      .list-box {
        width: 900px;
        overflow: hidden;
      }
      .list {
        display: flex;
        margin: auto;
        .box-item {
          margin-right: 24px;
          width: 230px;
          height: 360px;
          padding: 60px 28px 0;
          background-color: #dee9f9;
          img {
            display: inline-block;
            width: 164px;
            padding-bottom: 20px;
          }
          .box-title {
            text-align: center;
            color: red;
          }
        }
      }
    }
  }
  .science-character {
    .character-content {
      margin-top: 24px;
      .content-insert {
        width: 900px;
        margin: auto;
        .chart-item {
          display: flex;
          background-color: #ddd;
          margin-bottom: 24px;
          .left-item {
            padding: 10px 0 0 40px;
            img {
              display: inline-block;
              width: 140px;
            }
            .left-text {
              text-align: center;
              color: red;
              padding: 20px 0 30px 0;
            }
          }
          .right-item {
            padding: 80px 100px 0 90px;
            position: relative;
            .right-desc {
            }
            .button {
              position: absolute;
              bottom: 30px;
              right: 36px;
              width: 174px;
              height: 38px;
              line-height: 38px;
              color: #000;
              text-align: center;
              background-color: #2a82e4;
            }
          }
        }
      }
      .button-text {
        text-align: center;
        margin-bottom: 35px;
      }
    }
  }
  .science-yueqi {
    .yueqi-content {
      display: flex;
      width: 900px;
      margin: 24px auto 0;
      justify-content: space-around;
      .yueqi-item {
        padding: 10px;
        position: relative;
        width: 230px;
        height: 320px;
        img {
          display: block;
          width: 150px;
          height: 150px;
          margin: auto;
        }
        .button {
          text-align: center;
          margin: 30px 0 12px 0;
        }
        .audio {
          transform: scale(0.5);
          position: absolute;
          left: -38px;
        }
      }
    }
  }
}
